<template>
  <!-- 新增背景层 -->
  <div>
    <div class="global-background"></div>

    <div class="email-header">
      <div class="email-container">
        <!-- 头部区域 -->
        <div class="header-top">
          <h1 class="title">
            <!-- 动态绑定日期 -->
            <p class="date">{{ time }}</p>
            Your Amazon.co.uk Funds Status
          </h1>
        </div>

        <!-- 主体容器 -->
        <div class="content-wrapper">
          <!-- 顶部LOGO -->
          <div class="amazon-header">
            <img src="./logo1.png" alt="Amazon Logo" class="amazon-logo">
          </div>

          <!-- 文本显示区域 -->
          <el-card style="height: 400px">
            <!-- 显示文本内容 -->
            <pre class="card-content">{{ txt }}</pre>
          </el-card>
          <!-- 公司信息 -->
          <p class="company-info">
            Amazon Payments UK Limited是一家在英格兰和威尔士注册的私人股份有限公司...
          </p>
        </div>

        <!-- 按钮组 -->
        <div class="button-container">
          <router-link to="/">
            <el-button type="primary" plain>返回</el-button>
            <el-button type="success" plain>确认</el-button>
          </router-link>
          <el-button plain @click="openEditDialog">编辑</el-button>
        </div>
        <!--  二级弹窗页面  -->
        <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
          <el-date-picker
            v-model="editTime"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
          <br><br>
          <el-input
            type="textarea"
            :autosize="{ minRows: 16, maxRows: 16}"
            placeholder="请输入内容"
            v-model="editTxt">
          </el-input>
          <el-button type="success" @click="update">确认</el-button>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      title: '编辑内容',
      open: false,
      // 原始数据
      time: '',
      txt: '',
      // 编辑时使用的副本数据
      editTime: '',
      editTxt: '',
      info: []
    }
  },
  mounted () {
    // 组件挂载后自动查询数据
    this.fetchData()
  },
  methods: {
    fetchData () {
      // 获取数据的方法
      axios.get('http://127.0.0.1/user', { params: { id: 1 } })
        .then(res => {
          // 检查返回的数据是否为数组且至少有一个元素
          if (Array.isArray(res.data) && res.data.length > 0) {
            const userData = res.data[0]
            if (userData.time && userData.txt) {
              this.time = userData.time
              this.txt = userData.txt
              console.log('数据加载成功')
            } else {
              console.error('数据格式不正确:', res.data)
              this.$message({
                message: '获取数据失败，数据格式不正确',
                type: 'error'
              })
            }
          } else {
            console.error('数据格式不正确:', res.data)
            this.$message({
              message: '获取数据失败，未找到用户数据',
              type: 'error'
            })
          }
        })
        .catch(err => {
          console.error('获取数据失败:', err)
          this.$message({
            message: '获取数据失败，请稍后重试',
            type: 'error'
          })
        })
    },
    openEditDialog () {
      // 打开编辑弹窗，复制当前数据到编辑数据
      this.editTime = this.time
      this.editTxt = this.txt
      this.open = true
    },
    update () {
      // 更新数据的方法
      if (!this.editTime || !this.editTxt) {
        this.$message({
          message: '日期和内容不能为空',
          type: 'warning'
        })
        return
      }

      // 发送 PUT 请求更新数据
      axios.get('http://127.0.0.1/list/update', {
        params: {
          id: 1,
          time: this.editTime,
          txt: this.editTxt
        }
      })
        .then((res) => {
          if (res.data && res.data.status === 200) {
            this.time = this.editTime
            this.txt = this.editTxt
            this.open = false
            this.$message({
              message: '更新成功',
              type: 'success'
            })
          } else {
            console.error('更新失败:', res.data)
            this.$message({
              message: '更新失败，服务器返回错误',
              type: 'error'
            })
          }
        })
        .catch((err) => {
          if (err.response) {
            console.error('服务器错误:', err.response.status, err.response.data)
            this.$message({
              message: `更新失败，服务器返回: ${err.response.status}`,
              type: 'error'
            })
          } else if (err.request) {
            console.error('网络请求错误:', err.request)
            this.$message({
              message: '更新失败，无法连接到服务器',
              type: 'error'
            })
          } else {
            console.error('发生错误:', err.message)
            this.$message({
              message: `更新失败: ${err.message}`,
              type: 'error'
            })
          }
        })
    }
  }
}
</script>

<style scoped>
.card-content {
  padding: 0px;
  white-space: pre-wrap;
  overflow: auto;
  height: 100%;
  margin: 0;
  font-size: 13px;
  font-weight: 0.5;
  opacity: 0.7;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

.email-header {
  position: relative;
  min-height: 100vh;
  padding: 15px 30px;
}

/* 新增全局背景样式 */
.global-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background: url('./img_1.png') no-repeat center center;
  background-size: cover;
  opacity: 0.15;
  filter: blur(2px);
}

.header-top {
  margin-left: 15px;
  margin-top: 10px;
  width: 100%;
  margin-bottom: 10px;
  text-align: left;
}
.date {
  color: #666;
  font-size: 13px;
  margin-bottom: 1px;
}
.title {
  color: #232f3e;
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 5px 0;
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
}

/* 主体容器优化 */
.email-container {
  max-width: 800px;
  margin: 0 auto;
  border: 1px solid #e1e1e1;
  background: #fff;
}

/* LOGO区域 */
.amazon-header {
  height: 40px;
  background: #232f3e;
  display: flex;
  align-items: center;
  padding: 0 15px;
}
.amazon-logo {
  height: 30px;
}

/* 内容区域 */
.content-wrapper {
  padding: 25px;
  background: #f5f5f5;
  margin: 15px;
  border-radius: 4px;
}
/* 公司信息段落 */
.company-info {
  font-size: 12px;
  color: #666;
  line-height: 1.6;
  margin-top: 20px;
}

/* 按钮容器优化 */
.button-container {
  padding: 20px 30px;
  display: flex;
  gap: 20px;
  justify-content: center;  /* 修改：从flex-start改为center[1,5](@ref) */
  border-top: 1px solid #f0f0f0;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .email-header {
    padding: 15px;
  }
  .content-wrapper {
    padding: 15px;
    margin: 10px;
  }

  /* 新增移动端按钮组优化 */
  .button-container {
    flex-wrap: wrap;  /* 小屏幕换行显示 */
    justify-content: center !important;  /* 强制居中 */
  }
}
.title::after {
  content: "";
  position: absolute;
  left: -15px;
  bottom: 0;
  width: 800px;
  height: 2px;
  background: #ff9900;
  transform: scaleX(0.9);
  transition: transform 0.3s ease;
}

.title:hover::after {
  transform: scaleX(1);
}

</style>
